<!--
 * @描述信息: 主页
 * @Author:  zls
-->
<template>
  <div class="home">
    <!-- 测试按钮级别权限 -->
    <div style="margin-bottom: 40px">
      <h1 style="font-size: 26px; margin-bottom: 10px">测试按钮级别权限</h1>
      <el-button v-permission="['sys:dept', 'sys:document']" type="primary">按钮级别权限-新增</el-button>
      <el-button v-permission="['sys:systenConfig']" type="primary">按钮级别权限-编辑</el-button>
      <el-button v-permission="['sys:deleteDept']" type="primary">按钮级别权限-删除</el-button>
      <el-button v-permission="['sys:abcf']" type="primary">按钮级别权限-配置</el-button>
    </div>

    <!-- 测试国际化 -->
    <div style="margin-bottom: 40px">
      <h1 style="font-size: 26px">测试国际化</h1>
      <div style="line-height: 30px">{{ $t('home.text') }}</div>
      <el-input type="text" v-model="inputValue" :placeholder="$t('home.placeholder')" clearable></el-input>
    </div>

    <!-- 测试弹框 -->
    <div style="margin-bottom: 40px">
      <h1 style="font-size: 26px; margin-bottom: 10px">测试弹框</h1>
      <div style="display: flex">
        <!-- 测试自定义弹框 -->
        <el-button type="primary" plain @click="show1 = true">自定义弹框</el-button>
        <z-popup v-if="show1" :show="show1" :width="300" :height="300" @close="show1 = false">
          <div class="popup-main" style="height: 100%; display: flex; align-items: center; justify-content: center">
            <div>请开始你的表演</div>
          </div>
        </z-popup>
        <!-- 测试定制弹框 -->
        <el-button type="primary" plain @click="show2 = true">定制弹框</el-button>
        <z-modal v-if="show2" name="zs" age="14" title="弹框标题" :show="show2" :width="500" :height="300" @close="show2 = false" @cancel="show2 = false" @sure="sure">
          <div class="modal-main">
            <div style="height: 1500px">请开始你的表演</div>
          </div>
        </z-modal>
        <!-- 测试删除弹框 -->
        <z-delToast @sure="deleteFn">
          <el-button type="primary" plain style="margin-left: 15px">删除弹框</el-button>
        </z-delToast>
      </div>
    </div>

    <!-- 测试组件 -->
    <div style="margin-bottom: 40px; display: flex">
      <div>
        <h1 style="font-size: 26px; margin-bottom: 10px">测试tree组件</h1>
        <div style="width: 200px; height: 250px">
          <z-tree
            ref="treeRef"
            :data="treeData.list"
            :defaultProps="{
              children: 'children',
              label: 'label'
            }"
            default-expand-all
            show-checkbox
            :showSearch="true"
            @nodeClick="nodeClick"
            @check="check"
          ></z-tree>
        </div>
      </div>
      <div style="flex: 1; margin-left: 80px">
        <h1 style="font-size: 26px; margin-bottom: 10px">测试echarts组件</h1>
        <div class="echarts-box" style="width: 90%; height: 300px">
          <z-lineOrColumnarEcahrts id="ecahrts" :xData="echartsOp.xData" :yData="echartsOp.yData"></z-lineOrColumnarEcahrts>
        </div>
      </div>
    </div>

    <!-- 测试mock.js -->
    <div style="margin-bottom: 40px">
      <h1 style="font-size: 26px">测试mock.js</h1>
      <div style="display: flex">
        <el-card class="box-card" v-for="(item, key) in requestLists" :key="key" style="flex: 1; margin: 0 10px">
          <template #header>
            <div class="card-header">
              <span>{{ item.name }}</span>
              <el-button class="button" type="primary" plain @click="sendRequest(key)">Send</el-button>
            </div>
          </template>
          <div v-loading="item.show">{{ item.info }}</div>
        </el-card>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { reactive, ref } from 'vue'
import { textMock1, textMock2 } from '@/api/testMock'

const show1 = ref<boolean>(false)
const show2 = ref<boolean>(false)
function sure() {}
function deleteFn() {}

const treeData: any = reactive({
  list: [
    {
      id: 1,
      label: '一级 1',
      children: [
        {
          id: 4,
          label: '二级 1-1',
          children: [
            {
              id: 9,
              label: '三级 1-1-1'
            },
            {
              id: 10,
              label: '三级 1-1-2'
            }
          ]
        }
      ]
    },
    {
      id: 2,
      label: '一级 2',
      children: [
        {
          id: 5,
          label: '二级 2-1'
        },
        {
          id: 6,
          label: '二级 2-2'
        }
      ]
    }
  ]
})
// 点击
function nodeClick(data: any) {}

// 多选
function check(keysArr: any, nodesArr: any) {}

// ecahrts图标配置项
const echartsOp: any = reactive({
  xData: ['03.21', '03.22', '03.23', '03.24', '03.25', '03.26', '03.27'],
  yData: [
    { type: 'line', color: '#38d2ff', list: [34, 78, 55, 90, 72, 14, 63], name: '数量', unit: '条' },
    { type: 'bar', color: '#8ef1e2', list: [1, 3, 4, 56, 12, 2, 1], name: '产量', unit: '吨' },
    { type: 'bar', color: '#ffb673', list: [11, 32, 43, 56, 3, 4, 1], name: '金额', unit: '万' },
    { type: 'effectScatter', color: '#badf00', list: [2, 5, 12, 5, 8, 16, 9], name: '风机', unit: '级' }
  ]
})

const inputValue = ref<string>('')

// 测试mock
const requestLists = ref([
  {
    name: 'GET Data',
    info: '暂无数据',
    show: false
  },
  {
    name: 'POST Data',
    info: '暂无数据',
    show: false
  }
])

function textMock1Fn() {
  requestLists.value[0].show = true
  textMock1().then((res: any) => {
    requestLists.value[0].info = res
    requestLists.value[0].show = false
  })
}

function textMock2Fn() {
  requestLists.value[1].show = true
  textMock2({ page: 1, pageSize: 15 }).then((res: any) => {
    requestLists.value[1].info = res.data
    requestLists.value[1].show = false
  })
}

const sendRequest = (key: number) => {
  switch (key) {
    case 0:
      textMock1Fn()
      break
    case 1:
      textMock2Fn()
      break
  }
}
</script>

<style lang="scss" scoped>
.home {
}
</style>
